/*
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-05-03 12:50:21
 * @LastEditors: machinist_wq
 * @LastEditTime: 2022-07-01 15:29:41
 * @Description: 公共配置
 * 人生无常！大肠包小肠......
 */
const path = require("path");
const os = require("os");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");

const PUBLIC_URL = process.env.NODE_ENV === "production" ? "./" : "";
function resolve(relatedPath) {
  return path.join(__dirname, relatedPath);
}

// 添加postcss-loader
const postcssLoader = {
  loader: "postcss-loader",
  options: {
    postcssOptions: {
      plugins: [["postcss-preset-env", { browsers: "last 2 versions" }]],
    },
  },
};
// cpu核数
const threads = os.cpus().length;
const webpackConfigBase = {
  entry: {
    app: [resolve("../src/index.tsx")],
  },
  resolve: {
    alias: {
      "@": resolve("../src"),
    },
    // 要解析的文件的拓展名, 引入的时候不需要写后缀
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    // 解析目录时需要使用的文件名
    mainFiles: ["index"],
  },
  // module此处为loader区域，一般文件内容解析，处理放在此处，如babel，less,postcss转换等
  module: {
    rules: [
      {
        // 每个文件只能被其中一个解析
        oneOf: [
          {
            test: /\.(js[x]?|ts[x]?)$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
            // exclude: /node_modules/,
            include: path.resolve(__dirname, "../src"),
            use: [
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  works: threads,
                },
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true,
                  cacheCompression: false, // 关闭缓存压缩
                  presets: [
                    "@babel/preset-env",
                    "@babel/preset-react",
                    "@babel/preset-typescript",
                  ],
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                },
              },
            ],
          },
          // 设置less样式处理
          {
            test: /\.less$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: "css-loader",
                options: {
                  importLoaders: 1,
                  modules: {
                    localIdentName: "[name]__[local]___[contenthash:base64:5]",
                  },
                },
              },
              postcssLoader,
              {
                loader: "less-loader",
                options: {
                  lessOptions: {
                    javascriptEnabled: true,
                  },
                },
              },
            ],
            sideEffects: true,
          },
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", postcssLoader],
            sideEffects: true,
          },
          //处理图片资源
          {
            test: /\.(png|jpe?g|gif|bmp|svg)$/,
            // 不在需要file-loader、url-loader
            // type: "asset/resource", //相当于file-loader
            // type: "asset/inline", //相当于url-loader
            type: "asset", //相当于limit
            generator: {
              // 指定打包以后文件存放地址
              filename: "static/images/[name].[contenthash:8].[ext]",
            },
            parser: {
              dataUrlCondition: {
                // 超过50kb就不使用base64编码处理图片
                maxSize: 50 * 1024,
              },
            },
          },
          //处理字体图标资源
          {
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
            type: "asset/resource",
            generator: {
              // 指定打包以后文件存放地址
              filename: "static/fonts/[name].[contenthash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
      chunk: ["app"],
      PUBLIC_URL: PUBLIC_URL,
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: "public",
          globOptions: {
            ignore: ["**/*.html"],
          },
        },
      ],
    }),
  ],
};
module.exports = webpackConfigBase;
